<!--
 * @Description: 
 * @Author: 赵华宇
 * @Date: 2024-11-13 17:38:15
 * @LastEditors: 赵华宇
 * @LastEditTime: 2024-11-14 11:09:24
-->

<template>
  <div class="background">
    <!-- 子组件 -->
    <Reg v-if="showLogin" @my-alert="myAlert" />
    <p v-if="showLogin" @click="toggleForm">已有账号，直接<a href="">登录</a></p>
    <p v-if="showLogin" @click="toggleForm">没有有账号，直接<a href="">注册</a></p>
      <h1>{{ showLogin ? 'Login' : 'Register' }}</h1>
      <button @click="toggleForm">{{ showLogin ? '没有账号，前往注册' : '已有账号，前往登录' }}</button>
      <LoginForm v-if="showLogin" @login="handleLogin" />
      <RegisterForm v-else @register="handleRegister" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import LoginForm from './components/Login.vue';
import RegisterForm from './components/register.vue';
// import Reg from './Reg.vue';
//showLogin为true显示登录页面
const showLogin = ref(true); 

const toggleForm = () => {
  showLogin.value = !showLogin.value;
};

const handleLogin = () => {
  console.log('Login successful');
};

const handleRegister = () => {
  console.log('Register successful');
};
//父组件中声明一个事件
function myAlert(){
  alert("我是父组件中的事件-myAlert");
}
</script>

<style>
.background {
  background-image: url('./img/bgimg.png');
  background-size: cover;
  background-position: center;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>